<template>
	<view class="box-bg">
		<uni-nav-bar shadow color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="优惠团购"
			@clickLeft="back" />
	</view>
	<view class="tuangou-page">
		<view class="tuangou-list">
			<view v-for="(item, idx) in sortedList" :key="item.id" class="tuangou-card" @click="goDetail(item.id)">
				<image class="tuangou-img" :src="item.img" mode="aspectFill"></image>
				<!-- 新增标题 -->
				<view class="tuangou-title">{{ item.title }}</view>
				<!-- 原描述调整为内容 -->
				<view class="tuangou-desc">{{ item.content }}</view>
				<!-- 新增价格信息 -->
				<view class="tuangou-price">
					<text class="original-price">原价：¥{{ item.originalPrice }}</text>
					<text class="present-price">现价：¥{{ item.presentPrice }}</text>
				</view>
				<view class="tuangou-bottom">
					<!-- 时间调整为结束时间 -->
					<text class="tuangou-time">截止时间：{{ item.endTime }}</text>
					<view class="tuangou-detail">详情 <text class="arrow">》</text></view>
				</view>
				<!-- 新增发布者信息 -->
				<view class="tuangou-publisher">发布者：{{ item.publisher }}</view>
				<view class="tuangou-status" :class="item.status === 0 ? 'status-info' :
					item.status === 1 ? 'status-success' :
						item.status === 2 ? 'status-warning' :
							'status-danger'">
					{{ item.status === 0 ? '未开始' :
						item.status === 1 ? '进行中' :
							item.status === 2 ? '已结束' :
								'已取消' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import baseUrl from '@/untils/urlConfig';
import unirequest from '@/untils/unirequest';
import { onLoad } from '@dcloudio/uni-app'

const tuangouList = ref([]);
const getPurchaseList = async () => {
	try {
		const res = await unirequest({
			url: `${baseUrl}/chy/purchase/list`,
			method: 'GET'
		});
		if (res.data.code === 200) {
			tuangouList.value = res.data.rows.map(item => ({
				...item,
				img: item.img.replace(/`/g, ''),
				// 若后端字段名与前端不一致（例如后端用 end_time 表示截止时间），需手动映射
				endTime: item.endTime || '未设置' // 示例：假设后端字段为 end_time
			}));
		}
	}
	catch (error) {
		console.error("获取团购数据失败：", error);
	}
}
// 按发布时间倒序排列
const sortedList = computed(() => {
	return tuangouList.value.slice().sort((a, b) => b.publish - a.publish);
});

function back() {
	uni.navigateBack({
		delta: 1,
		fail: () => {
			uni.switchTab({ url: '/pages/index/index' });
		},
	});
}
function goDetail(id) {
	uni.navigateTo({ url: `/pages/lsa-tgxq/lsa-tgxq?id=${id}` });
}
onLoad(() => {
	getPurchaseList();
})
</script>

<style>
.box-bg {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
}

.tuangou-page {
	background: #f8f8f8;
	min-height: 100vh;
	margin-top: 90rpx;
}

.tuangou-header {
	background: linear-gradient(135deg, #2d8cf0 60%, #5bc0eb 100%);
	padding-bottom: 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-arrow {
	position: absolute;
	left: 30rpx;
	top: 60rpx;
	color: #fff;
	font-size: 40rpx;
}

.tuangou-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 60rpx;
}

.tuangou-actions {
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	color: #fff;
}

.tuangou-list {
	padding: 30rpx 0 0 0;
}

.tuangou-card {
	background: #fff;
	border-radius: 24rpx;
	margin: 0 24rpx 32rpx 24rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 24rpx 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.tuangou-img {
	width: 96%;
	height: 240rpx;
	border-radius: 20rpx;
	margin-bottom: 16rpx;
	margin-left: 2%;
}

.tuangou-desc {
	font-size: 28rpx;
	color: #333;
	margin: 0 24rpx 16rpx 24rpx;
}

.tuangou-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24rpx 24rpx 24rpx;
}

.tuangou-time {
	color: #bbb;
	font-size: 24rpx;
}

.tuangou-detail {
	color: #2d8cf0;
	font-size: 28rpx;
	display: flex;
	align-items: center;
}

.arrow {
	font-size: 26rpx;
	margin-left: 4rpx;
}

.tuangou-title {
	font-size: 32rpx;
	color: #2d8cf0;
	font-weight: bold;
	margin: 0 24rpx 12rpx 24rpx;
}

.tuangou-price {
	margin: 0 24rpx 12rpx 24rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.original-price {
	color: #999;
	font-size: 24rpx;
	text-decoration: line-through;
}

.present-price {
	color: #ff4d4f;
	font-size: 28rpx;
	font-weight: 600;
}

.tuangou-publisher {
	color: #666;
	font-size: 24rpx;
	margin: 0 24rpx 24rpx 24rpx;
}

.tuangou-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  display: inline-flex; /* 确保内联块级显示 */
}

.status-info {
  background: #e6f7ff;
  color: #2d8cf0; /* 蓝色，对应未开始 */
}

.status-success {
  background: #f6ffed;
  color: #52c41a; /* 绿色，对应进行中 */
}

.status-warning {
  background: #fffbe6;
  color: #faad14; /* 黄色，对应已结束 */
}

.status-danger {
  background: #fff1f0;
  color: #ff4d4f; /* 红色，对应已取消 */
}

.active {
	background: #e6f7ff;
	color: #2d8cf0;
}

.expired {
	background: #f5f5f5;
	color: #999;
}
</style>
